<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/5/17
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>采购申请</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
        </Panel>
    </Collapse>
    <card>
        <i-button type="info" @click="toCai">采购申请</i-button>
    </card>
    <modal v-model="caiFlag" title="采购订单" :width="800" @on-ok="caiGou()">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="供应商">
                <i-select v-model="org.providerId" style="width: 300px">
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
        </i-form>
        <i-button @click="add">增加</i-button>
        <i-button>提交</i-button>
        <i-table :columns="myColumns" :data="data" border  style="overflow: visible " stripe :height="200">

        </i-table>


    </modal>


    <i-table  :columns="columns" :data="pageResult.rows"   :height="400" border stripe>
        <template slot-scope="{row}" slot="proName">
            <span>{{row.provider.proName}}</span>
        </template>
        <template slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未审核":"已审核"}}</span>
        </template>
    </i-table>
    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];search();"
          show-sizer
          :page-size-opts="[5,10,15]"
          @on-page-size-change="pageSize=arguments[0];search();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data(){
            return{
                columns:[
                    {title:"编号",key: "id"},
                    {title:"生成日期",key: "createTime"},
                    {title:"审核日期",key: "checkTime"},
                    {title:"采购日期",key:"purchaseTime"},
                    {title:"下单员",key:"creator"},
                    {title:"审核员",key:"checker"},
                    {title:"采购员",key:"purchaser"},
                    {title:"库管员",key:"stockKeeper"},
                    {title:"供应商",slot:"proName"},
                    {title:"总金额",key:"totalMoney"},
                    {title:"订单状态",slot:"state"},
                    // {title:"操作",slot:"action"}

                ],
                myColumns:[
                    {title:"商品编号",key:"goodsId",
                        render: (h, { row, index }) => {
                            return h("Input", {
                                props: {
                                    value: row.goodsId
                                },


                            });



                        },


                    },
                    {title:"商品名称",key:"name",

                        render: (h, { row, index }) => {
                            return h("Select", {
                                    props: {
                                        value: row.name
                                    },
                                    on: {
                                        'on-select': val => {
                                            this.data[index].name = val;
                                        }
                                    }
                                },

                                this.shangList.map(item=>{
                                    return h('Option',{
                                        props:{

                                            value:item.id,
                                            label:item.name
                                        }
                                    })
                                })
                            );
                        }

                    },
                    {title:"价格",key:"purchaser",
                        render: (h, { row, index }) => {
                            return h("Input", {
                                props: {
                                    value: row.purchaser
                                },
                                on: {
                                    input: val => {
                                        this.data[index].purchaser = val;
                                    }
                                }
                            });
                        }
                    },
                    {title:"数量",key:"stockKeeper",
                        render: (h, { row, index }) => {
                            return h("Input", {
                                props: {
                                    value: row.stockKeeper
                                },
                                on: {
                                    input: val => {
                                        this.data[index].stockKeeper = val;
                                    }
                                }
                            });
                        }},
                    {title:"金额",key:"proName",
                        render: (h, { row, index }) => {
                            return h("Input", {
                                props: {
                                    value: row.proName
                                },
                                on: {
                                    input: val => {
                                        this.data[index].proName = val;
                                    }
                                }
                            });
                        }
                    },
                    {title:"操作",key:"action",

                        render:(h,params)=>{
                            return h('Button',{
                                props:{
                                    type:'error',
                                    size:'small'
                                },
                                on:{
                                    click:()=>{
                                        this.remove(params.index)
                                    }
                                }
                            },'删除')





                        }
                    }
                ],

                data:[],


                pageResult:{
                    rows:[],
                    total:50
                },
                caiFlag:false,
                pageNo:1,
                pageSize:5,
                org:{
                    providerId:'',
                },
                providerList:[],
                shangList:[],
            }

        },
        methods:{
            search(){
                axios.get(`${ctx}/caiGou/sq/search/${this.pageNo}/${this.pageSize}`)
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchProvider(){
                axios.get(`${ctx}/sys/provider/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
            searchGoods(){
                axios.get(`${ctx}/sys/goods/list`)
                    .then(({data})=>{

                        this.shangList=data.result;


                    })
            },

            toCai(){
                this.caiFlag=true;
            },
            remove(index){
                this.data.splice(index,1);
            },
            add(){
                const addData = {
                    goodsId: "",
                    name: "",
                    purchaser: "",
                    stockKeeper: "",
                    proName:""
                };
                this.data.push(addData);
            },

            caiGou(){
                console.log("sddfsfs")
            }

        },
        mounted(){
            this.search();
            this.searchProvider();
            this.searchGoods();
        },
    })
</script>
</body>
</html>